<template>
  <el-dialog v-model="boxVisible" width="50%">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-row :gutter="20">
          <el-col :span="12">
            <p class="title-p">计划图片</p>
            <el-image class="imgbox" :src="imgUrl(dataBasicsForm.picUrlMin)"
                      :preview-src-list="[imgUrl(dataBasicsForm.picUrl)]"></el-image>
          </el-col>
          <el-col :span="12">
            <!--            <p class="title-p">告警视频</p>-->
            <!--            <LivePlayer class="imgbox" :videoUrl="dataBasicsForm.flvUrl" fluent autoplay controls stretch dblclick-fullscreen>-->
            <!--            </LivePlayer>-->
          </el-col>
        </el-row>

        <p class="title-p">详情信息</p>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属杆塔:">
              <span class="item-text">{{ dataBasicsForm.stationName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通道预置位:">
              <span class="item-text">{{ dataBasicsForm.channelNo }}-{{ dataBasicsForm.presettingNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传时间:">
              <span class="item-text">{{ dataBasicsForm.uploadDate }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保存时间:">
              <span class="item-text">{{ dataBasicsForm.createDate }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="24" style="text-align: center" v-if="dataBasicsForm.processingStatus == 'Processing'">
            <el-button style="padding: 0 50px" type="warning" @click="disposeVisible = true">去处理</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <template v-slot:footer>
      <el-button @click="boxVisible = false">{{ $t("cancel") }}</el-button>
    </template>
  </el-dialog>

</template>

<script lang="ts">
import useView from "@/hooks/useView";
import {IObject} from "@/types/interface";
import baseService from "@/service/baseService";
import {defineComponent, reactive, toRefs} from "vue";
import {getToken} from "@/utils/cache";
import app from "@/constants/app";

const warningTypeArr = (data: string) => {
  console.log(data)
  return data.split(",");
}

const dataBasicsForm = {
  id: "",
  createDate: "",
  updateDate: "",
  cameraId: "",
  targetCodes: "",
  cameraAddr: "",
  picUrl: "",
  alarmCode: "",
  ip: "",
  aiPicUrl: "",
  processingStatus: "",
  level: ""
}

export default defineComponent({
  setup() {
    const state = reactive({
      boxVisible: false,
      dataBasicsForm: JSON.parse(JSON.stringify(dataBasicsForm)),
    });
    return {...useView(state), ...toRefs(state), warningTypeArr};
  },
  methods: {
    init(id: any) {
      this.boxVisible = true;
      this.$nextTick(() => {
        this.dataBasicsForm = JSON.parse(JSON.stringify(dataBasicsForm));
        this.dataBasicsForm.id = id;
        if (this.dataBasicsForm.id) {
          this.getInfo();
        }
      });
    },// 获取表单详情信息
    getInfo() {
      baseService.get(`/KxWarningPic/kxwarningpic/${this.dataBasicsForm.id}`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.dataBasicsForm = res.data;
      });
    },
    // 图片路径拼接
    imgUrl(url: any) {
      return `${app.api}/KxWarningPic/kxwarningpic/getImage?token=${getToken()}&filePath=` + url;
    }
  }
});
</script>

<style lang="scss" scoped>
.item-text {
  color: #FFFFFF;
}

.title-p {
  border-left: 4px solid #ffff00;
  padding-left: 10px;
  font-size: 16px;
  color: rgb(23, 180, 215);
  font-weight: 560;
}

.imgbox {
  width: 100%;
  height: 300px;
}

.flow-imgs-p {
  margin-right: 10px;
  width: 80px;
  height: 60px;
}
</style>
